<template>
	<view class="login-container">
		<view class="login-header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">接单平台</text>
			<text class="subtitle">专业技术服务平台</text>
		</view>
		
		<view class="login-form">
			<view class="form-item">
				<input 
					class="input" 
					type="text" 
					placeholder="请输入用户名" 
					v-model="form.username"
					:disabled="loading"
				/>
			</view>
			
			<view class="form-item">
				<input 
					class="input" 
					type="password" 
					placeholder="请输入密码" 
					v-model="form.password"
					:disabled="loading"
				/>
			</view>
			
			<button 
				class="login-btn" 
				:disabled="loading || !canSubmit"
				@click="handleLogin"
			>
				{{ loading ? '登录中...' : '登录' }}
			</button>
			
			<view class="login-footer">
				<text class="register-link" @click="goRegister">还没有账号？立即注册</text>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				loading: false
			}
		},
		computed: {
			canSubmit() {
				return this.form.username.trim() && this.form.password.trim()
			}
		},
		methods: {
			async handleLogin() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				
				try {
					const res = await this.$store.dispatch('login', {
						username: this.form.username.trim(),
						password: this.form.password.trim()
					})
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					this.redirectByRole(res.data.user.roleType)
					
				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			// 根据角色跳转
			redirectByRole(roleType) {
				let url = '/pages/index/index'
				
				switch (roleType) {
					case 1: // 管理员
						url = '/pages/admin/dashboard'
						break
					case 2: // 派单员
						url = '/pages/dispatcher/dashboard'
						break
					case 3: // 用户
						url = '/pages/index/index'
						break
					case 4: // 技术员
						url = '/pages/tech/dashboard'
						break
				}
				
				uni.reLaunch({ url })
			},
			
			goRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 100rpx 60rpx 60rpx;
		display: flex;
		flex-direction: column;
	}
	
	.login-header {
		text-align: center;
		margin-bottom: 100rpx;
		
		.logo {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 30rpx;
		}
		
		.title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 20rpx;
		}
		
		.subtitle {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
	
	.login-form {
		.form-item {
			margin-bottom: 40rpx;
			
			.input {
				width: 100%;
				height: 88rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 44rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
				box-sizing: border-box;
			}
		}
		
		.login-btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(45deg, #FF6B6B, #FF8E53);
			color: #fff;
			border: none;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 40rpx;
			
			&:disabled {
				opacity: 0.6;
			}
		}
		
		.login-footer {
			text-align: center;
			margin-top: 60rpx;
			
			.register-link {
				color: rgba(255, 255, 255, 0.9);
				font-size: 28rpx;
			}
		}
	}
	

</style>